html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
   }
ul{list-style: none;}
body {
   width: 3840px;
  font-family: "Helvetica", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", SimSun, sans-serif;
  line-height: 1;
  color: #fff;
   }
  
//index.html start
#DCpile,#chageSite{width: 3840px;height: 2160px;}

.anim-flip:hover {
    animation: 0.35s linear 0s alternate none 1 featuresicon;
    -webkit-animation: 0.35s linear 0s alternate none 1 featuresicon;
    -moz-animation:0.35s linear 0s alternate none 1 featuresicon;
    -o-animation: 0.35s linear 0s alternate none 1 featuresicon;
    -ms-animation:0.35s linear 0s alternate none 1 featuresicon;
    color: #4183C4;
}

.show {
    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
}


#top{height: 500px;
    .dz-number{width: 500px; height: 500px; background: #009fcc;font-size: 360px;font-weight: 600; color: #fff;position: relative;float: left;
                .num{padding: 100px;}
                span{position: absolute;right: 100px;top: 100px;font-size: 116px;}
    }
    
    .dz-msg{ background: #0089af;padding-left: 120px;width:1250px;height: 500px;float: left;color: #fff;
             .dz-type{font-size: 160px; padding:80px 0;letter-spacing:16px;}
             ul{
                 li{display:inline-block;font-size: 110px;padding-right: 116px;
                    span{padding-left: 40px;}
                 }
             }
    }
    
    .more-info{ background: #0089af;width:1970px;height: 500px;color: #fff;float: left;overflow: hidden;
                .date{float: left;padding:100px 0;font-size: 80px;
                        li{padding-bottom: 30px;letter-spacing: 10px;border-right: solid 6px #fff;padding-right: 100px;}
                        li:last-child{padding-bottom: 0;}
                }
                .weather{float: left;padding:100px 0 ;font-size: 100px;
                 ul{float:left; margin-left: 90px;
                           li{padding-bottom: 56px;
                            span{font-size: 115px;}
                           }
                           li:last-child{padding-bottom: 0;}
                        }
                        .border{border-right: solid #fff 6px;float: left;padding: 34px 90px 34px 0;
                                
                        .Airquality{background: #f17c73;width: 260px;height: 236px;border-radius: 20px;margin:0 0 0 90px;
                            li{padding:20px 0 0 40px;font-size: 68px;}
                            li:first-child{font-size: 54px;padding-top: 53px;}
                        }
                        }
                       
                }
                .logo{padding-top: 100px;
                     img{display: block;padding-left: 50px;padding-top: 37px;}
                }
    }
}

#container{background: #343738;height: 1650px;
          .chargeA{width: 1910px;position: relative;float: left;border-right: solid 10px #3b3e3f;
                  .name{width: 490px; height: 170px;border-top-left-radius: 12px;border-top-right-radius: 12px; background-color: #202425; position: absolute;top: 140px;right: 165px;color: #fff;font-size: 138px;font-weight: bold;text-align: center;padding-top:40px;background-image:url(../img/triangleblue.png);background-position: bottom left;background-repeat: no-repeat;}
                  .picA{padding:284px 0 112px 0;text-align: center;
                  .bigcircle{position: relative;width: 750px;height: 750px;border-radius:375px ;margin: 0 auto;margin-top: -50px;
                    #circlehidden1{width: 750px;height: 750px;border-radius: 375px;position: absolute;top: 5px;left: 5px;}
                    #circlehidden2{width: 750px;height: 750px;border-radius: 375px;position: absolute;top: 5px;left: 5px;}
                  }
                  
                        #circle2{border-radius:350px;width: 700px;height: 700px;position: absolute;top: 28px;left: 30px;}
                        .second{position: relative;
                            .pic{position: absolute;left: 47px;top:48px;display: block;width: 610px;}
                            .battery{position: absolute;left: 300px;bottom:-100px; display: block;width: 100px;animation: batterymedium 2s;
        -o-animation: batterymedium 2s;-ms-animation: batterymedium 2s; -moz-animation: batterymedium 2s;-webkit-animation: batterymedium 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                            strong{z-index: 11;font-size: 154px;top:274px;font-weight: normal;color: #fff;}
                        }
                        
                  }
                  .chargeingType{font-size: 70px;text-align: center;color: #fff;padding-bottom: 100px;}
                  .currentInfo{background: #2a2c2d;padding: 80px 0;
                            
                            li{display: inline-block;color: #fff;font-size: 90px;font-weight: bold;padding-left: 250px;
                                ul{padding-left: 0;
                                li:first-child{padding-bottom: 62px;font-size: 64px;}
                                 li{display: block;padding-left: 0;font-weight: normal;
                                    span{font-size: 100px;font-weight: bold;}
                                 }
                                }
                            }
                  } 
          }
          .chargeB{width: 1920px;position: relative;float: left;
                  .name{width: 490px; height: 170px;border-top-left-radius: 12px;border-top-right-radius: 12px; background-color: #202425; position: absolute;top: 140px;right: 165px;color: #fff;font-size: 138px;font-weight: bold;text-align: center;padding-top:40px;background-image:url(../img/triangle.png);background-position: bottom left;background-repeat: no-repeat;}
                  .picB{padding:284px 0 106px 0;text-align: center;position: relative;
                    
                       .userpic{display: block;position: absolute;bottom:-100px; left: 800px; animation: myfirst 2s;
        -o-animation: myfirst 2s;-ms-animation: myfirst 2s; -moz-animation: myfirst 2s;-webkit-animation: myfirst 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                  } 
                  .chargeingType{font-size: 70px;text-align: center;color: #fff;padding-bottom: 100px;          
                  }
                  .currentInfo{background: #2a2c2d;padding: 80px 0;
                            
                            li{display: inline-block;color: #777879;font-size: 90px;font-weight: bold;padding-left: 250px;
                                ul{padding-left: 0;
                                li:first-child{padding-bottom: 62px;font-size: 64px;}
                                 li{display: block;padding-left: 0;font-size: 100px;font-weight: normal;
                                    span{font-size: 100px;font-weight: bold;}
                                 }
                                }
                            }
                  }  
          }
}


//index.html end


//chargeSite start
   #chargeSite{
       #basicInfo{background: #0089af;width: 500px;text-align: center;height: 2160px;color: #fff;font-size: 42px;float: left;
               
                .LOGO{padding: 87px 0;background: #009fcc;
                    img{height: 120px;}
                }
                .time{padding-top: 320px;padding-bottom: 80px;text-align: center;}
                .date{padding-bottom: 30px;}
                .weekday{padding-bottom: 40px;}
                .weather{margin: 70px 60px 0 60px;padding: 64px 0 60px 0;border-top:solid 6px #fff}
                .temperature{font-size: 84px;
                            span{padding-left: 30px;}
                }
                .pm{margin: 70px 60px 24px;background: #f7766c;border-radius:20px;font-size: 96px;padding: 30px 0;
                    li:first-child{font-size: 44px;padding-bottom: 10px;}
                    li span#pm_level{font-size: 80px;line-height: 106px;}
                }
           
       }
       
       #DC-pile,#singlePile{width: 1100px;height: 2160px;background: #343738;float: left;
              .type{background: #494b4c;height: 300px;text-align: center;border-right:solid 6px #000 ;
                  li{font-size: 80px;color: #fff;display: inline-block;padding: 110px 0;font-weight: bold;}
                  li:last-child{font-size: 50px;background: #ff6559;border-radius: 20px;width: 210px;padding: 20px ;margin-left: 50px;}
              }
              .chargeInfo{position: relative;height: 804px;text-align: center;padding-top: 126px;border-right:solid 6px #000 ;
                        .num{position: absolute;top:64px;left: 60px;font-size: bold;color:#fff;
                            span{font-size: 184px;}
                            span:last-child{font-size: 80px;position: absolute;top: 10px;left: 90px;}
                        }
                        .dcState1{width: 1064px;padding: 50px 0 94px 0;
                                  .bigcircle{width: 520px;height: 520px;border-radius: 260px;position: relative;margin: 0 auto;}
                                  .hiddencirclesmall{width: 520px;height: 520px;position: absolute;top: 0;left: 0;}
                                  .circle{margin-bottom: 47px;position: absolute;top: 29px; left: 28px; width: 468px;height: 468px;border-radius: 234px;
                                        img{position: absolute;top: 30px;left: 30px;}
                                        .bgcircle{position: absolute;top: 30px;left: 30px;width: 410px;}
                                        .battery{position: absolute;left: 180px;top:320px;animation: batterysmall 2s;
        -o-animation: batterysmall 2s;-ms-animation: batterysmall 2s; -moz-animation: batterysmall 2s;-webkit-animation: batterysmall 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                                  }
                                  strong{color: #fff;font-size: 118px;font-weight: normal;padding-top: 175px;}
                                  
                        }
                        .dcState2{position: relative;
                            .user{position: absolute;bottom: 0px; left: 390px;
            animation:user 2s;
        -o-animation: user 2s;-ms-animation: user 2s; -moz-animation: user 2s;-webkit-animation: user 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                        }
                        .nameA{position: absolute;top: 40px;right:70px;width: 256px;font-size: 72px;color: #fff;font-weight: bold;background-color: #1f2425;padding: 20px; border-radius: 20px;border-bottom-left-radius:0; background-image:url(../img/triangleblue.png);background-position: bottom left;background-repeat: no-repeat;}
                        .nameB{position: absolute;top: 40px;right:70px;width: 256px;font-size: 72px;color: #fff;font-weight: bold;background-color: #1f2425;padding: 20px; border-radius: 20px;border-bottom-left-radius:0; background-image:url(../img/triangle.png);background-position: bottom left;background-repeat: no-repeat;}
                        }
                         
                       
                        .chargestate{margin-top:60px;font-size: 60px;font-weight: bold;letter-spacing: 6px;background: #2a2c2d;border-radius: 10px;width: 820px;margin: 20px auto 0;padding: 50px 0;
                            
                        }
       }
       #AC-pile{width: 2240px;height: 2160px;background: #343738;float: left;
            .type{background: #494b4c;height: 300px;text-align: center;border-right:solid 6px #000 ;
                  li{font-size: 80px;color: #fff;display: inline-block;padding: 110px 0;font-weight: bold;}
                  li:last-child{font-size: 50px;background: #a8ce34;border-radius: 20px;width: 210px;padding: 20px ;margin-left: 50px;}
              }
              
            .chargeInfo{position: relative;height: 800px;text-align: center;padding-top: 126px;border-right:solid 6px #3a3d3e;width: 1114px;float: left;border-bottom: #2d3031 solid 6px;
                        .num{position: absolute;top:64px;left: 60px;font-size: bold;color:#fff;
                            span{font-size: 184px;}
                            span:last-child{font-size: 80px;position: absolute;top: 10px;left: 100px;}
                        }
                        .charging{position: relative;height: 562px;
                                #circle3{width: 534px;height: 534px;border-radius: 267px;margin: 0 auto;}
                                .battery{position: absolute;top: 37%;left: 45%;animation:battery 2s;
        -o-animation: battery 2s;-ms-animation: battery 2s; -moz-animation: battery 2s;-webkit-animation: battery 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                        }
                        .name{position: absolute;top: 40px;right:70px;width: 256px;font-size: 72px;color: #fff;font-weight: bold;background-color: #1f2425;padding: 20px; border-radius: 20px;border-bottom-left-radius:0; background-image:url(../img/triangle.png);background-position: bottom left;background-repeat: no-repeat;}
                        .dcState2{position: relative;
                            .user{position: absolute;bottom: 0px; left: 415px;
            animation:user 2s;
        -o-animation: user 2s;-ms-animation: user 2s; -moz-animation: user 2s;-webkit-animation: user 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                        }
                        }
                        .chargestate{margin-top:60px;font-size: 60px;font-weight: bold;letter-spacing: 6px;background: #2a2c2d;border-radius: 10px;width: 820px;margin: 20px auto 0;padding: 50px 0;
                            
                        }
       }
   } 
   
   #singlePile .chargeA{width: 2300px;border-right: none;height: 1660px;float: left;
                  .picA{padding:284px 0 112px 0;text-align: center;
                  .bigcircle{position: relative;width: 860px;height: 860px;border-radius:430px ;margin: 0 auto;margin-top: -50px;
                    #circlehidden1{width: 860px;height: 860px;border-radius: 430px;position: absolute;top: 2px;left: 0px;}
                  }
                        #circle21{border-radius:400px;width: 800px;height: 800px;position: absolute;top:35px;left: 33px;}
                        .second{position: relative;
                            .pic{position: absolute;left: 47px;top:48px;display: block;width: 710px;}
                            .battery{position: absolute;left: 300px;bottom:100px; display: block;width: 180px;animation: battery1 2s;
        -o-animation: battery1 2s;-ms-animation: battery1 2s; -moz-animation: battery1 2s;-webkit-animation: battery1 2s;
        animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
                            strong{z-index: 11;font-size: 180px;top:295px;font-weight: normal;color: #fff;}
                        }
                        
                  }
                  .chargeingType{padding: 40px 250px;border-radius: 20px;background: #2a2c2d;width: 700px;margin: 100px auto 0;}
   }
   
   #singlePile .chargeB{background: #2a2c2d;height: 1650px;float: left;width: 1540px;
                    ul{padding: 348px 0  0 250px;
                        li{font-size: 80px;font-weight: bold;padding-bottom: 210px;
                            span{padding-left: 280px;}
                            span.text{font-size: 64px;padding: 0;font-weight: normal;}
                        }
                    }
   }
   
   #systemEntrance{background: url(../img/bg.png) no-repeat 0 0 ;width:3840px ;height: 2160px;
            .topnav{height: 220px;background-color:rgba(0,0,0,0.3);
                li{display: inline-block;}
                li:first-child{float: left;padding:38px 0 0 80px;}
                li:last-child{float: right;padding:80px 80px 0 0;}
            }
            .lineone{margin: 230px;position: relative;
            ul{margin: 0 auto;
                li{display: inline-block;padding: 0 170px;text-align: center;
                    p{margin-top: 60px;font-size: 60px;}
                }
            }
            ul:last-child{margin-top: 240px;}
            }
            .footer{width: 100%;text-align: center;padding-top: 100px;color: #fff;font-size: 40px;}
   }
   
   
   
   
@keyframes featuresicon {
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@-webkit-keyframes featuresicon {
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

@-moz-keyframes featuresicon {
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

@-o-keyframes featuresicon {
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

@-ms-keyframes featuresicon {
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

@keyframes myfirst 
        {
            0%   {opacity: 0; height:10px;width:322px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1; bottom:250px;height:356px;width:322px}
        }


  @-webkit-keyframes myfirst 
        {
            0%   {opacity: 0; height:10px;width:322px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1; bottom:250px;height:356px;width:322px}
        }
        
@-moz-keyframes  myfirst 
        {
            0%   {opacity: 0; height:10px;width:322px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1; bottom:250px;height:356px;width:322px}
        }
        

 @-o-keyframes myfirst 
        {
            0%   {opacity: 0; height:10px;width:322px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1; bottom:250px;height:356px;width:322px}
        }
        
@-ms-keyframes  myfirst 
        {
            0%   {opacity: 0; height:10px;width:322px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1; bottom:250px;height:356px;width:322px}
        }
 
 
 
 
@keyframes  user 
        {
            0%   {opacity: 0; height:10px;width:284px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:120px; height:284px;width:284px}
        }
        
@-webkit-keyframes user 
        {
            0%   {opacity: 0; height:10px;width:284px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:120px; height:284px;width:284px}
        }        
 
@-moz-keyframes  user 
        {
            0%   {opacity: 0; height:10px;width:284px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:120px; height:284px;width:284px}
        }
        
        
 @-o-keyframes user 
        {
            0%   {opacity: 0; height:10px;width:284px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:120px; height:284px;width:284px}
        }        
 
@-ms-keyframes  user 
        {
            0%   {opacity: 0; height:10px;width:284px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:120px; height:284px;width:284px}
        }
        
@keyframes battery 
        {
            0%   {opacity: 0; height:10px;width:142px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:198px; height:142px;width:142px}
        }
        
        @-webkit-keyframes battery 
        {
            0%   {opacity: 0; height:10px;width:142px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:198px; height:142px;width:142px}
        }
        
       @-moz-keyframes battery 
        {
            0%   {opacity: 0; height:10px;width:142px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:198px; height:142px;width:142px}
        }
        
          @-o-keyframes battery 
        {
            0%   {opacity: 0; height:10px;width:142px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:198px; height:142px;width:142px}
        }
        
      @-ms-keyframes battery 
        {
            0%   {opacity: 0; height:10px;width:142px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:198px; height:142px;width:142px}
        }
        
        
 @-webkit-keyframes glow {
    0% {
//      border-color: #3578a5;
        box-shadow: 0 0 10px 10px rgba(40, 144, 248, .3);
    }
    100% {
//      border-color: #54ade8;
        box-shadow: 0 0 14px 14px rgba(40, 144, 248, .8);
    }
}

@-moz-keyframes glow {
    0% {
//      border-color: #3578a5;
        box-shadow: 0 0 10px 10px rgba(40, 144, 248, .3);
    }
    100% {
//      border-color: #54ade8;
        box-shadow: 0 0 14px 14px rgba(40, 144, 248, .8);
    }
}

@-o-keyframes glow {
  0% {
//      border-color: #3578a5;
        box-shadow: 0 0 10px 10px rgba(40, 144, 248, .3);
    }
    100% {
//      border-color: #54ade8;
        box-shadow: 0 0 14px 14px rgba(40, 144, 248, .8);
    }
}

@-ms-keyframes glow {
    0% {
//      border-color: #3578a5;
        box-shadow: 0 0 10px 10px rgba(40, 144, 248, .3);
    }
    100% {
//      border-color: #54ade8;
        box-shadow: 0 0 14px 14px rgba(40, 144, 248, .8);
    }
}

@keyframes glow {
    0% {
//      border-color: #3578a5;
        box-shadow: 0 0 10px 10px rgba(40, 144, 248, .3);
    }
    100% {
//      border-color: #54ade8;
        box-shadow: 0 0 14px 14px rgba(40, 144, 248, .8);
    }
}

@keyframes batterymedium 
        {
            0%   {opacity: 0; height:10px;width:100px;bottom:-100px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:150px; height:100px;width:100px}
        }
        
        @-webkit-keyframes batterymedium 
        {
            0%   {opacity: 0; height:10px;width:100px;bottom:0}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:150px; height:100px;width:100px}
        }
        
       @-moz-keyframes batterymedium 
        {
            0%   {opacity: 0; height:10px;width:100px;bottom:-100px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:150px; height:100px;width:100px}
        }
        
          @-o-keyframes batterymedium 
        {
            0%   {opacity: 0; height:10px;width:100px;bottom:-100px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom:150px; height:100px;width:100px}
        }
        
      @-ms-keyframes batterymedium
        {
            0%   {opacity: 0; height:10px;width:100px;bottom:-100px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;top:450px; height:100px;width:100px}
        }
        
        
        
        @keyframes batterysmall 
        {
            0%   {opacity: 0; height:10px;width:110px;top:500px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;top:320px; height:110px;width:110px}
        }
        
        @-webkit-keyframes batterysmall 
        {
            0%   {opacity: 0; height:10px;width:110px;top:500px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;top:320px; height:110px;width:110px}
        }
        
       @-moz-keyframes batterysmall 
        {
            0%   {opacity: 0; height:10px;width:110px;top:500px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;top:320px; height:110px;width:110px}
        }
        
          @-o-keyframes batterysmall 
        {
             0%   {opacity: 0; height:10px;width:110px;top:500px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;top:320px; height:110px;width:110px}
        }
        
      @-ms-keyframes batterysmall
        {
             0%   {opacity: 0; height:10px;width:110px;top:500px}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;top:320px; height:110px;width:110px}
        }
        
        
        @keyframes battery1
        {
            0%   {opacity: 0; height:10px;width:180px;bottom:-100px;}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom: 100px; height:180px;width:180px}
        }
        
        @-webkit-keyframes battery1
        {
           0%   {opacity: 0; height:10px;width:180px;bottom:-100px;}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom: 100px; height:180px;width:180px}
        }
        
       @-moz-keyframes battery1 
        {
            0%   {opacity: 0; height:10px;width:180px;bottom:-100px;}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom: 100px; height:180px;width:180px}
        }
        
          @-o-keyframes battery1
        {
            0%   {opacity: 0; height:10px;width:180px;bottom:-100px;}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom: 100px; height:180px;width:180px}
        }
        
      @-ms-keyframes battery1
        {
             0%   {opacity: 0; height:10px;width:180px;bottom:-100px;}
            25%  {opacity: 0.25; }
            50%  {opacity: 0.5; }
            75%  {opacity: 0.75;  }
            100% {opacity: 1;bottom: 100px; height:180px;width:180px}
        }
        
//chageSite end